import {useEffect, useState} from "react";
import {Input, message, Modal, Pagination, Button} from 'antd'
import {ExclamationCircleOutlined} from "@ant-design/icons";
import ReRplayList from "@/pages/detail/component/ReRplayList";
import './detailcard.scss'
//
// ------ ------ ------ ------ ------ 评论列表 ------ ------ ------ ------ ------
//
function ArticleReplyList() {
  const [replyList, setReplyList] = useState([])
  const [page, setPage] = useState(1)   // 评论页号
  const [limit, setLimit] = useState(5)   // 每页显示评论数
  const [total, setTotal] = useState(0)   // 评论总数

  function getReplyList() {
    /* cyGet('评论列表',
       cyUrl([baseURL, post.base, post.viewReplies]),
       {
         token: wls.XB_token,
         id: wls.XB_post_id_now,
         page: page,
         limit: limit
       }
     ).then(data => {
       setReplyList(data.replyList)
       setTotal(data.pagination.total)
     }).catch(err => {
       message.error('服务器爆炸啦~')
     })*/
  }

  // 改变页码信息
  function changePage(page: number, pageSize: number) {
    setPage(page)
    setLimit(pageSize)
  }

  // 删除评论
  function showConfirm(id: any) {
    Modal.confirm({
      title: '确认删除评论？',
      icon: <ExclamationCircleOutlined/>,
      content: '评论将会被删除，该操作不可逆！',
      onOk() {
        deleteReReply(id)
      }
    })
  }

  function deleteReReply(id: any) {
    /* cyPost('删除评论',
       cyUrl([baseURL, post.base, post.deletePost]),
       {
         token: wls.XB_token,
         id: id
       }
     ).then(() => {
       message.success({
         content: '删除成功！',
         duration: 0.3,
         onClose: () => {
           getReplyList()
         }
       })
     }).catch(err => {
       message.error(err)
     })*/
  }

  useEffect(() => {
    getReplyList()
  }, [page, limit])

  return (
    <div className='com-article-reply-list'>
      {replyList.map((item: any, index) => {
        return (
          <ReRplayList
            item={item}
            key={index}
            index={index}
            page={page}
            limit={limit}
            showConfirm={() => {
              showConfirm(item.post.id)
            }}/>
        )
      })}
      <Pagination
        className='pagination'
        showQuickJumper
        showSizeChanger
        pageSizeOptions={[5, 10, 15, 20]}
        total={total}
        defaultCurrent={1}
        defaultPageSize={5}
        pageSize={limit}
        onChange={changePage}
      />
    </div>
  )
}

export default ArticleReplyList
